<template>
	<view class="container">
		<view class="catalog">
			<!-- 雇主 -->
			<view v-if="userType==1?true :false">
				<!-- <view class="headMaskDiv"  v-if="headStatus==0||headStatus==1 ||headStatus==2">
					<view class="headMask">{{headStatus==2 ? "更换头像" :headTesx}}</view>
				</view> -->
				<!-- <image :src="pic" mode="aspectFill" class="head" @click="isShowheadImage=true"></image> -->
				<image :src="pic+'?imageView2/1/w/80/h/80'" mode="aspectFill" class="head"></image>
				<view @click="handleChangeAvatar()">
					<text style="color: black;">{{ userTypeheadTesx}}</text>
					<image :src="headStatus==3?'':jiantou" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 雇员-->
			<view v-if="userType==0?true :false">
				<!-- <view class="headMaskDiv"  v-if="headStatus!=2">
					<view class="headMask">{{headStatus==0 ? "更换头像"  : headStatus==1 ? '审核失败' :headTesx}}</view>
				</view> -->
				<!-- <image :src="pic" mode="aspectFill" class="head" @click="isShowheadImage=true"></image> -->
				<image :src="pic" mode="aspectFill" class="head"></image>
				<view @click="headStatus==2 || headStatus==3 ?  '' :handleChangeAvatar()">
					<text :style="headStatus==2? 'color: black;' : 'color:red;' ">{{ headTesx}}</text>
					<image :src="headStatus==2 || headStatus==3 ?'':jiantou" mode="aspectFill"></image>
				</view>
			</view>
			<view @click="handleChangeUserInfo(0)">
				<text>昵称</text>
				<view>
					<text>{{ userObj.userName }}</text>
					<image src="https://images.linglinggong.net/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<view>
				<view class="chooseType">
					<text>年龄</text>
					<view>
						<text v-show="!userObj.age" @click="handleOpenPage">请实名认证</text>
						<text v-show="userObj.age">{{ userObj.age }}</text>
						<image src="https://images.linglinggong.net/icon1/17.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view>
				<view class="chooseType">
					<text>性别</text>
					<view>
						<text v-if="!userObj.age" @click="handleOpenPage"> 请实名认证</text>
						<text v-else style="color: #402110;">{{ sexList[userObj.sex] }}</text>
						<image src="http://images.linglinggong.net/icon1/17.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view v-if="false">
				<picker mode="selector" :range="heightList" value="20" @change="bindTypeChange($event, 2)">
					<view class="chooseType">
						<text>身高</text>
						<view>
							<text v-show="!userObj.stature">请选择</text>
							<text v-show="userObj.stature">{{ userObj.stature }}</text>
							<image src="http://images.linglinggong.net/icon1/17.png" mode="aspectFill"></image>
						</view>
					</view>
				</picker>
			</view>
			<view v-if="false">
				<picker mode="selector" :range="educationList" value="3" @change="bindTypeChange($event, 3)">
					<view class="chooseType">
						<text>学历</text>
						<view>
							<text v-show="!userObj.edu">请选择</text>
							<text v-show="userObj.edu">{{ userObj.edu }}</text>
							<image src="http://images.linglinggong.net/icon1/17.png" mode="aspectFill"></image>
						</view>
					</view>
				</picker>
			</view>
			<view @click="handleChangeUserInfo(1)" v-if="false" style="margin-top: 0;">
				<text>个性签名</text>
				<view>
					<text>{{ this.userObj.gxSign }}</text>
					<image src="http://images.linglinggong.net/icon1/17.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 新增信息展示 -->
			<view v-if="true"
				style="width: 94%;margin: 0 auto;background: none;height: 90rpx;padding: 0;font-weight: 600;font-size: 30rpx;">
				个人综合评价</view>
			<view class="my-info" v-if="userType==0 && Object.keys(userDetail).length !== 0" style="margin: 0;">
				<!-- <view class="mm-tips" v-if="false">
					<image src="https://images.linglinggong.net/static/rwbz.png" mode="widthFix"></image>
				</view> -->
				<view class="my-info-center">
					<view class="my-info-center-item">
						<view class="my-info-center-item-left">
							<text>综合好评率</text>
						</view>
						<view class="my-info-center-item-mid">
							<u-line-progress :height="24" :showText="false"
								activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
								:percentage="userDetail.haoping"></u-line-progress>
						</view>
						<view class="my-info-center-item-right">
							<text v-if="userDetail.haoping">{{userDetail.haoping}}%</text>
							<text v-else>0%</text>
						</view>
					</view>
					<view class="my-info-center-item">
						<view class="my-info-center-item-left">
							<text>任务完单率</text>
						</view>
						<view class="my-info-center-item-mid">
							<u-line-progress :height="24" :showText="false"
								activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
								:percentage="userDetail.finishWorkRate"></u-line-progress>
						</view>
						<view class="my-info-center-item-right">
							<text v-if="userDetail.finishWorkRate">{{userDetail.finishWorkRate.toFixed(0)}}%</text>
							<text v-else>0%</text>
						</view>
					</view>
					<view class="my-info-center-item">
						<view class="my-info-center-item-left">
							<text>试工成功率</text>
						</view>
						<view class="my-info-center-item-mid">
							<u-line-progress :height="24" :showText="false"
								activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
								:percentage="userDetail.resignRate"></u-line-progress>
						</view>
						<view class="my-info-center-item-right">
							<text v-if="userDetail.resignRate">{{userDetail.resignRate.toFixed(0)}}%</text>
							<text v-else>0%</text>
						</view>
					</view>
					<view class="my-info-center-item">
						<view class="my-info-center-item-left">
							<text>准点到达率</text>
						</view>
						<view class="my-info-center-item-mid">
							<u-line-progress :height="24" :showText="false"
								activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
								:percentage="userDetail.lateRate"></u-line-progress>
						</view>
						<view class="my-info-center-item-right">
							<text v-if="userDetail.lateRate">{{userDetail.lateRate.toFixed(0)}}%</text>
							<text v-else>0%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="my-info" v-if="userType==1 && Object.keys(userDetail).length !== 0" style="margin: 0;">
				<!-- <view class="mm-tips" v-if="false">
					<image src="https://images.linglinggong.net/static/rwbz.png" mode="widthFix"></image>
				</view> -->
				<view class="my-info-center">
					<view class="my-info-center-item">
						<view class="my-info-center-item-left">
							<text>综合好评率</text>
						</view>
						<view class="my-info-center-item-mid">
							<u-line-progress :height="24" :showText="false"
								:percentage="pingjia.comprehensivePositiveRating*100"
								class="progressLine"></u-line-progress>
						</view>
						<view class="my-info-center-item-right">
							<text
								v-if="pingjia.comprehensivePositiveRating">{{(pingjia.comprehensivePositiveRating*100).toFixed(0)}}%</text>
							<text v-else>0%</text>
						</view>
					</view>
					<view class="my-info-center-item">
						<view class="my-info-center-item-left">
							<text>发单准确率</text>
						</view>
						<view class="my-info-center-item-mid">
							<u-line-progress :height="24" :showText="false"
								activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
								:percentage="pingjia.orderAccuracy*100"></u-line-progress>
						</view>
						<view class="my-info-center-item-right">
							<text v-if="pingjia.orderAccuracy">{{(pingjia.orderAccuracy*100).toFixed(0)}}%</text>
							<text v-else>0%</text>
						</view>
					</view>
					<view class="my-info-center-item">
						<view class="my-info-center-item-left">
							<text>试工通过率</text>
						</view>
						<view class="my-info-center-item-mid">
							<u-line-progress :height="24" :showText="false"
								activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
								:percentage="pingjia.trialPassRate*100"></u-line-progress>
						</view>
						<view class="my-info-center-item-right">
							<text v-if="pingjia.trialPassRate">{{(pingjia.trialPassRate*100).toFixed(0)}}%</text>
							<text v-else>0%</text>
						</view>
					</view>
					<view class="my-info-center-item">
						<view class="my-info-center-item-left">
							<text>当日结算率</text>
						</view>
						<view class="my-info-center-item-mid">
							<u-line-progress :height="24" :showText="false"
								activeColor="linear-gradient(to right , #EDEA2F 15%,#F77700 80%)"
								:percentage="pingjia.dailySettlementRate*100"></u-line-progress>
						</view>
						<view class="my-info-center-item-right">
							<text
								v-if="pingjia.dailySettlementRate">{{(pingjia.dailySettlementRate*100).toFixed(0)}}%</text>
							<text v-else>0%</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask-head-image" v-if="isShowheadImage" @click.stop="isShowheadImage=false">
			<image :src=" pic" mode="aspectFill" :style="{width: screenWidth + 'px', height:screenHeight + 'px' }">
			</image>
		</view>
	</view>
</template>
<script>
	import {
		he_evaluate_lv,
	} from '@/libs/unit.js'
	export default {
		data() {
			return {
				MoRen: 'http://images.linglinggong.net/images/main/logo.png',
				jiantou: "http://images.linglinggong.net/icon1/17.png",
				logo: 'http://images.linglinggong.net/images/main/logo.png',
				ageList: [],
				sexList: ['男', '女'],
				heightList: [],
				educationList: ['博士', '硕士', '本科', '专科', '高中', '初中', '小学', '其他'],
				uploadToken: '', //七牛上传TOKEN
				imgPath: '', //图片路径
				pic: '',
				userObj: { //用户信息
					avatar: '', //头像
					age: '',
					sex: '',
					stature: '',
					edu: '',
				},
				userInfo: {
					user: {},
					params: {}
				}, //当前用户信息
				headStatus: 0, //
				headTesx: "", //显示审核状态文字 <---此处改动
				userTypeheadTesx: "修改头像", //显示审核状态文字 <---此处改动
				isShowheadImage: false,
				userType: uni.getStorageSync('userType'),
				screenWidth: '0',
				screenHeight: '0',
				workTypeList: [],
				userDetail: {},
				pingjia: {}
			}
		},
		methods: {
			async employer_evaluation() {
				let res = await this.$fetch(this.$api.employer_evaluation, {
					userId: uni.getStorageSync('userInfo').userId
				}, 'POST')
				if (res.code) uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.pingjia = res.data
			},
			handleOpenPage() {
				uni.navigateTo({
					url: '/pages/real-name/real-name'
				})
			},
			async get_user_by_id(userId) {
				// console.log(userId)
				let res = await this.$fetch(this.$api.get_user_by_id, {
					userId: userId
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 整理数据,res.data.user为null，则改为""
				Object.getOwnPropertyNames(res.data.user).forEach(function(key) {
					res.data.user[key] = res.data.user[key] == null ? '' : res.data.user[key]
				})
				this.workTypeList = []
				// 初始化期望工种
				if (res.data.user.expectWorkType) {
					res.data.user.expectWorkType.split(',').forEach((item) => {
						this.workTypeList.push(item)
					})
				}
				// let haoping = uni.getStorageSync('heEvaluateLv') ? uni.getStorageSync('heEvaluateLv') : []
				// if (haoping.indexOf(res.data.userId) != -1) {
				// 	res.data.haoping = haoping[haoping.indexOf(res.data.userId) + 1]
				// } else {
				// 	he_evaluate_lv(res.data.userId).then((v) => {
				// 		res.data.haoping = v
				// 	})
				// }
				he_evaluate_lv(res.data.userId).then((v) => {
					res.data.haoping = v
				})
				setTimeout(() => {
					this.userDetail = res.data
				}, 100)
			},
			// 获取用户当前的经纬度
			get_current_location() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.getAdcode(res.latitude, res.longitude)
						uni.setStorageSync('location', [res.latitude, res.longitude])
					}
				})
			},
			// 由经纬度查询街道的行政代码
			getAdcode(lat, lng) {
				console.log(1, lat, lng);
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
					data: {
						key: 'd73cc951a96637a251a9a2446b48ce9c',
						location: lng + ',' + lat
					},
					success: res => {
						console.log('行政部门', res);
						uni.setStorageSync('adcode', res.data.regeocode.addressComponent.adcode)
					}
				})
			},
			//确认修改用户信息
			async handleSetUserInfo(e) {
				// this.get_current_location();
				// this.userObj.adCode = uni.getStorageSync('adcode')?uni.getStorageSync('adcode'):330782
				this.userObj.adCode = uni.getStorageSync('region') ? uni.getStorageSync('region').slice(0, 6) : 330783
				if (e != 1) {
					this.userObj.avatar = ''
					this.userObj.avatarto = ''
				}
				// console.log('我的修改用户参数',this.userObj);
				let res = await this.$fetch(this.$api.upd_user, this.userObj, 'POST')
				// console.log("修改成功返回的",JSON.stringify(res))
				if (res.data == 1) {
					uni.showToast({
						title: '修改成功~',
						icon: 'none'
					})
				} else {
					return uni.showToast({
						title: res.msg ? res.msg : '修改失败',
						icon: 'none'
					})
				}
				if (this.userType == 1) {
					this.userTypeheadTesx = "修改完成"
				}
				if (e == 1 && this.userType != 1) {
					uni.showToast({
						title: '上传成功，等待审核',
						icon: 'none'
					})
					this.getUserInfo()
				}
				this.getUserInfo()
			},
			// 获取当前用户信息
			async getUserInfo() {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.get_user_by_id(res.data.userId)
				this.userType = res.data.userType
				// 整理数据,res.data.user为null，则改为""
				Object.getOwnPropertyNames(res.data.user).forEach(function(key) {
					res.data.user[key] = res.data.user[key] == null ? '' : res.data.user[key]
				})
				res.data.user.sex = res.data.user.sex.toString() //讲数字变成字符串
				uni.setStorageSync("level", res.data.user.level) //用户等级
				uni.setStorageSync('userInfo', res.data)
				uni.setStorageSync('userType', res.data.userType)
			},
			// 修改头像，上传图片至七牛
			handleChangeAvatar() {
				// console.log("11");
				uni.navigateTo({
					url: "/pages/camera/idphoto/idphoto"
				})
			},
			updateUserImage(e) {
				// console.log(e, "eeeeeeeeeeeeeeeeeeeeeeeee");
				this.pic = e
				uni.setStorageSync("pics", e)
				this.headTesx = "审核中"
				this.headStatus = 3
				this.uploadImgs(e)
			},
			// 上传图片至七牛
			uploadImgs(urls) {
				let _this = this
				let ext = urls.split(".").pop()
				// console.log(urls.split(".").pop())
				// let ext = urls.substring((urls.length-26),urls.length)
				uni.uploadFile({
					url: this.$api.uploadPic,
					name: 'file',
					filePath: urls,
					formData: {
						token: this.uploadToken,
						key: this.$u.guid() + "." + ext
					},
					success: ({
						data
					}) => {
						data = JSON.parse(data)
						// _this.userObj.avatar = data.hash
						// _this.userInfo.user.avatarto = data.hash
						_this.userObj.avatar = data.key
						_this.userInfo.user.avatarto = data.key
						this.handleSetUserInfo(1)
					}
				})
			},
			// 获取七牛上传TOKEN
			async get_qiniu_token() {
				let res = await this.$fetch(this.$api.get_qiniu_token, {}, 'POST')
				this.uploadToken = res.msg
			},
			//修改用户名
			handleChangeUserInfo(flag) {
				if (flag == 0) {
					uni.navigateTo({
						url: '/pages/change-userInfo/change-userInfo?name=' + this.userInfo.user.userName +
							'&flag=' + 0
					})
				} else {
					uni.navigateTo({
						url: '/pages/change-userInfo/change-userInfo?motto=' + this.userInfo.user.gxSign +
							'&flag=' + 1
					})
				}
			},
			//0默认头像 1审核未通过，更换头像 2已认证 3审核中
			isDefultHead() {
				let avatarto = uni.getStorageSync('userInfo').user.avatarto == null ? uni.getStorageSync('userInfo').user
					.avatar : uni.getStorageSync('userInfo').user.avatarto
				let idavaterStatus = uni.getStorageSync('userInfo').user.idavaterStatus
				this.headStatus = idavaterStatus
				/* !avatarto && idavaterStatus == 0 ? 0 : avatarto && idavaterStatus == 0 ? 1 : avatarto &&
					idavaterStatus == 1 ? 2 : avatarto && idavaterStatus == 2 ? 3 : 0
			 */
				console.log(this.headStatus, "审核状态-----------------");
				//<!-- 此处改动, 187-195 -->
				if (idavaterStatus == 0) {
					this.headTesx = "更换头像"
				} else if (idavaterStatus == 1) {
					this.headTesx = "审核未通过，更换头像"
				} else if (idavaterStatus == 2) {
					this.headTesx = "已认证"
				} else if (idavaterStatus == 3) {
					this.headTesx = "审核中"
				}
			},
			// 当选择类别时,年龄、性别、学历
			bindTypeChange(e, flag) {
				console.log('event', e, flag)
				if (flag == 0) {
					this.userObj.age = this.ageList[e.detail.value]
				} else if (flag == 1) {
					this.userObj.sex = e.detail.value.toString()
				} else if (flag == 2) {
					this.userObj.stature = this.heightList[e.detail.value]
				} else {
					this.userObj.edu = this.educationList[e.detail.value]
				}
				this.userObj.avatar = uni.getStorageSync('userInfo').user.avatarto
				this.handleSetUserInfo()
			},
			// 初始化数据r
			initData() {
				this.userObj.age = this.userInfo.user.age
				let idCardJson = JSON.parse(this.userInfo.idCardJson);
				if (idCardJson) {
					console.log('10月31日打印' + idCardJson)
					let idnumber = idCardJson.iDNumber ? idCardJson.iDNumber.substring(6, 10) + "-" + idCardJson.iDNumber
						.substring(10, 12) + "-" + idCardJson.iDNumber.substring(12, 14) : ''
					this.calculateAge(idnumber);
				}
				this.userObj.userName = this.userInfo.user.userName
				this.userObj.avatar = this.userInfo.user.avatar
				this.userObj.sex = this.userInfo.user.sex
				this.userObj.stature = this.userInfo.user.stature
				this.userObj.edu = this.userInfo.user.edu
				this.userObj.gxSign = this.userInfo.user.gxSign
				// this.userObj.age = this.userInfo.user.age
				this.pic = uni.getStorageSync('imgPath') + this.userInfo.user.avatarto
				console.log('初始化用户信息', this.userObj);
				if (uni.getStorageSync("pics") == '' || uni.getStorageSync("pics") == null) {
					uni.setStorageSync("pics", this.imgPath + this.userInfo.user.avatarto)
				}
			},
			// 计算年纪
			calculateAge(data) {
				let birthArr = data.split('-');
				let birth = {};
				birth.year = birthArr[0];
				birth.month = birthArr[1];
				birth.day = birthArr[2];
				const date = new Date();
				const currentYear = date.getFullYear();
				const currentMonth = date.getMonth() + 1;
				const currentDate = date.getDate();
				if (currentYear > birth.year) {
					this.userObj.age = currentYear - birth.year;
					if (currentMonth < birth.month || currentDate < birth.day) this.userObj.age -= 1;
				}
			}
		},
		updated() {
			// this.isDefultHead()
		},
		onLoad() {
			// this.getUserInfo()
		},
		onShow() {
			this.imgPath = uni.getStorageSync('imgPath')
			this.getUserInfo()
			this.get_qiniu_token()
			this.ageList = Array.from(Array(80), (v, k) => k).slice(16)
			this.heightList = Array.from(Array(190), (v, k) => k).slice(150)
			this.userInfo = uni.getStorageSync('userInfo')
			console.log('用户信息', this.userInfo)
			this.initData()
			this.isDefultHead()
			uni.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.screenWidth
					this.screenHeight = res.screenHeight
					uni.setStorageSync("imgWidth", res.screenWidth)
					uni.setStorageSync("imghight", res.screenHeight)
				}
			})
			this.employer_evaluation()
		},
	}
</script>
<style lang="less">
	.container {
		.my-info {
			background-color: #FFFFFF;
			margin: 30rpx;
			padding: 30rpx;
			// box-shadow: 0 2px 4px 0 rgba(96, 52, 0, 0.10);
			// border-radius: 7px;
			position: relative;

			&>text {
				height: 40rpx;
				position: relative;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					left: -30rpx;
					width: 4rpx;
					height: 28rpx;
					background: #FCC928;
					border-radius: 1px;
				}
			}

			&>view {
				display: flex;
				justify-content: space-between;

				&>view {
					&>view {
						margin-top: 36rpx;

						text:first-child {
							color: rgba(64, 33, 16, 0.50);
							// margin-right: 30rpx;
						}
					}
				}
			}

			.mm-tips {
				width: 106%;
				position: absolute;
				// border: 1px solid;
				top: -3%;
				left: -22rpx;
				z-index: 99999;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.my-info-center {
				// border: 1px solid;
				width: 100%;
				height: 100%;
				margin-top: -30rpx;
				margin-bottom: 15rpx;
				// background: red;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.my-info-center-item {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.my-info-center-item-left {
						position: relative;
						width: 160rpx;
						padding-right: 10rpx;

						// border: 1px solid;
						.tips3 {
							// border: 1px solid;
							position: absolute;
							right: 5%;
							top: -70%;
							z-index: 9;

							// width: 50rpx;
							// border: 1px solid;
							image {
								width: 50rpx;
								height: 100%;
							}
						}

						text {
							color: #000;
							font-size: 24rpx;
						}
					}

					.my-info-center-item-mid {
						flex: 1;
						// border: 1px solid;
					}

					.my-info-center-item-right {
						width: 70rpx;
						margin-left: 15rpx;
						// border: 1px solid;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;

						text {
							color: #F67700;
						}
					}
				}
			}
		}

		&>.catalog {
			&>view {
				background-color: #FFFFFF;
				padding: 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.head {
					// 头像未加载时展示小蚂蚁  新增修改 287-292
					background-image: url(http://images.linglinggong.net/images/main/logo.png);
					background-position: 0 0;
					background-size: 150rpx 150rpx;
				}

				.headMaskDiv {
					position: absolute;
					bottom: 29rpx;
					left: 35rpx;
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.headMask {
					width: 150rpx;
					height: 44rpx;
					background-color: rgba(0, 0, 0, 0.5);
					position: absolute;
					bottom: 0;
					z-index: 1;
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
					text-align: center;
				}

				.chooseType {
					display: flex;
					width: 690rpx;
					justify-content: space-between;
					align-items: center;

					&>text {
						height: 40rpx;
					}

					&>view {
						display: flex;
						align-items: center;

						&>text {
							margin-right: 30rpx;
						}

						&>text:first-child {
							color: rgba(64, 33, 16, 0.50);
						}

						&>image {
							width: 16rpx;
							height: 26rpx;
						}
					}
				}

				&>text {
					line-height: 40rpx;
				}

				&>view {
					display: flex;
					align-items: center;

					&>text {
						line-height: 40rpx;
						margin-right: 30rpx;
					}

					&>image {
						width: 16rpx;
						height: 26rpx;
					}
				}

				&::after {
					content: "";
					position: absolute;
					bottom: 0rpx;
					width: 720rpx;
					height: 2rpx;
					background: #F2F2F2;
				}
			}

			&>view:first-child {
				text {
					color: rgba(64, 33, 16, 0.50);
				}

				&>image {
					height: 160rpx;
					width: 160rpx;
					border-radius: 50%;
					background-color: #F2F2F2;
				}

				// box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03) inset;
			}

			&>view:last-child {
				// margin-top: 30rpx;
			}
		}
	}

	.mask-head-image {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000000;
		z-index: 9999;
	}

	/deep/.u-line-progress__line {
		background: linear-gradient(to right, #EDEA2F 15%, #F77700 80%) !important;
	}
</style>